<template>
  <view class="result-container">
    <!-- 状态图标 -->
    <uv-icon
      :name="iconName"
      :color="iconColor"
      size="120"
    />

    <!-- 标题 -->
    <text class="result-title">{{ title }}</text>

    <!-- 描述 -->
    <text v-if="desc" class="result-desc">{{ desc }}</text>

    <!-- 操作按钮 -->
    <view class="btn-group">
      <uv-button
        v-if="showBack"
        type="primary"
        shape="circle"
        @click="goBack"
      >
        返回上一页
      </uv-button>
      <uv-button
        v-if="showHome"
        type="success"
        shape="circle"
        @click="goHome"
      >
        返回首页
      </uv-button>
      
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

// props
const props = defineProps({
  status: { type: String, default: 'success' }, // success / error / warning / info / waiting
  title: { type: String, default: '操作成功' },
  desc: { type: String, default: '' },
  showBack: { type: Boolean, default: true },
  showHome: { type: Boolean, default: true },
  showCustom: { type: Boolean, default: false },
  customText: { type: String, default: '再试一次' },
  backNum:{ type: Number, default: 1 }
})

// 计算图标和颜色
const iconName = computed(() => {
  switch (props.status) {
    case 'success': return 'checkmark-circle-fill'
    case 'error': return 'close-circle-fill'
    case 'warning': return 'warning-fill'
    case 'waiting': return 'reload'
    case 'info': return 'info-circle-fill'
    default: return 'help-circle'
  }
})
const iconColor = computed(() => {
  switch (props.status) {
    case 'success': return '#4caf50'
    case 'error': return '#f44336'
    case 'warning': return '#ff9800'
    case 'waiting': return '#2196f3'
    case 'info': return '#607d8b'
    default: return '#333'
  }
})

// 方法
const goBack = () => {
  //uni.navigateBack()
  uni.navigateBack({
    delta: props.backNum
  })
}
const goHome = () => {
  uni.reLaunch({ url: '/pages/home/index' })
}
</script>

<style scoped>
.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
  padding: 40rpx;
  box-sizing: border-box;
}
.result-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 30rpx;
  color: #333;
}
.result-desc {
  font-size: 28rpx;
  margin-top: 20rpx;
  color: #666;
  text-align: center;
}
.btn-group {
  margin-top: 60rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 70%;
}
</style>
